<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :maskClosable="false"
    :ok-button-props="{ props: { disabled: disableSubmit } }"
    :fullscreen="true"
    @close="close"
    cancelText="关闭"
  >
    <a-spin :spinning="Loading">
      <div :class="{ isCheck: isCheck }">
        <!-- <div class="table-header">
                   <span class="table-title">填报单位：</span>{{model.departName}}
                   <span class="table-title">审计负责人：</span>{{model.auditPersonName}}
                   <span class="table-title">填表人：</span>{{model.createByText}}
                   <span class="table-title">填表时间：</span>{{model.createTime}}
          <span class="table-title">统计时间：</span>{{model.year}}年（{{model.quarter}}季度）
        </div> -->
        <a-table
          class="edit-list"
          ref="table"
          size="middle"
          bordered
          width="100vw"
          :pagination="false"
          :columns="columns"
          :dataSource="dataSource"
          :scroll="{ x: 250, y: 520 }"
        >
          <div slot="title">
            <div class="title">{{ title }}</div>
            <div class="sub-title">
              <!-- <div>填报单位：{{ model.departName }}</div> -->
              <div></div>
              <div>{{ model.year }}年（{{ model.quarter }}季）度</div>
              <!-- <div>审计负责人：{{ model.auditPersonName }}</div> -->
              <!-- <div>填表人：{{ model.createByText }}</div> -->
              <!-- <div>填表时间：{{ model.createTime }}</div> -->
              <div>金额单位（万元）</div>
            </div>
          </div>
          <template slot="rowIndex">
            <div class="header-title">
              <div style="position: absolute; top: 95px; left: -28px">序号</div>
              <div style="position: absolute; top: 16px; left: 0px; width: 30px">内容</div>
              <div
                style="
                  content: '';
                  position: absolute;
                  width: 1px;
                  height: 157px;
                  top: -10px;
                  left: 0px;
                  background-color: rgb(200 207 211);
                  display: block;
                  transform: rotate(329deg);
                  box-sizing: border-box;
                "
              />
            </div>
          </template>
          <template slot="companyName" slot-scope="companyName">
            <div style="width: 100%; height: 45px; overflow-x: hidden; overflow-y: auto">{{ companyName }}</div>
          </template>
          <template v-for="col in customRenderList" v-slot:[col]="text, record, index">
            <div :key="col" v-if="record.companyName != '合计'">
              <a-input-number
                class="inputnumber"
                :key="col"
                @change="handleChange(record, col)"
                v-model="record[col]"
              />
            </div>
            <div :key="col" v-else>
              <span class="spancell">{{ record[col] }}</span>
            </div>
          </template>
          <template v-for="item in spancell" v-slot:[item]="text, record, index">
            <span :key="item" class="spancell">{{ record[item] }}</span>
          </template>
        </a-table>
      </div>
    </a-spin>
  </j-modal>
</template>
<script>
import { httpAction, getAction } from '@/api/manage'
import columns from './columns'

export default {
  name: 'CheckAndEditModel',
  components: {},
  data() {
    return {
      Loading: false,
      disableSubmit: false,
      columns: columns(this),
      dataSource: [],
      title: '',
      visible: false,
      isCheck: false,
      customRenderList: [
        'a2',
        'a3',
        'a4',
        'a5',
        'a6',
        'a7',
        'a8',
        'a9',
        'a10',
        'a11',
        'a12',
        'a13',
        'a14',
        'a15',
        'a16',
        'a18',
        'a19',
        'a20',
        'a21',
      ],
      spancell:[
        'a1',
        'a17'
      ],
      url: {
        content: '/sjxxzhbb/sjProjectSummaryReport/queryProjectSummaryInfoList',
        save: '/sjxxzhbb/sjProjectSummaryReport/save',
        export: '/sjxxzhbb/sjProjectSummaryReport/exportProjectSummaryReportInfo',
      },
      model: {},
      contentId: '',
    }
  },
  created() {},
  methods: {
    handleChange(row, col) {
      if (
        col === 'a2' ||
        col === 'a3' ||
        col === 'a4' ||
        col === 'a5' ||
        col === 'a6' ||
        col === 'a7' ||
        col === 'a8' ||
        col === 'a9' ||
        col === 'a10' ||
        col === 'a11' ||
        col === 'a12' ||
        col === 'a13' ||
        col === 'a14' ||
        col === 'a15' ||
        col === 'a16'
      ) {
        row['a1'] =
          parseFloat(row['a2'] || '0') +
          parseFloat(row['a3'] || '0') +
          parseFloat(row['a4'] || '0') +
          parseFloat(row['a5'] || '0') +
          parseFloat(row['a6'] || '0') +
          parseFloat(row['a7'] || '0') +
          parseFloat(row['a8'] || '0') +
          parseFloat(row['a9'] || '0') +
          parseFloat(row['a10'] || '0') +
          parseFloat(row['a11'] || '0') +
          parseFloat(row['a12'] || '0') +
          parseFloat(row['a13'] || '0') +
          parseFloat(row['a14'] || '0') +
          parseFloat(row['a15'] || '0') +
          parseFloat(row['a16'] || '0')
        this.setHj(col, 'a1')
      } else if (col === 'a18' || col === 'a19' || col === 'a20' || col === 'a21') {
        row['a17'] =
          parseFloat(row['a18'] || '0') +
          parseFloat(row['a19'] || '0') +
          parseFloat(row['a20'] || '0') +
          parseFloat(row['a21'] || '0')
        this.setHj(col, 'a17')
      }
    },
    setHj(col, column) {
      let rows = this.dataSource.length - 1
      let num = 0
      let hjNum = 0
      for (let i = 0; i < rows; i++) {
        num = num + parseFloat(this.dataSource[i][col])
        hjNum = hjNum + parseFloat(this.dataSource[i][column])
      }
      this.dataSource[rows][col] = num
      this.dataSource[rows][column] = hjNum
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.content()
      this.visible = true
    },
    content() {
      this.Loading = true
      getAction(this.url.content, {
        type: '2',
        quarter: this.model.quarter,
        year: this.model.year,
      }).then((res) => {
        if (res.success && res.result) {
          this.contentId = res.result[0].id
          this.dataSource = JSON.parse(res.result[0].reportInfo)
          console.log(this.dataSource)
          this.Loading = false
        } else {
          console.log(res)
        }
      })
    },
    close(isSubmit) {
      if (isSubmit) {
        this.saveData()
      } else {
        this.dataSource = []
        this.visible = false
      }
    },
    saveData() {
      this.Loading = true
      let string = JSON.stringify(this.dataSource)
      httpAction(
        this.url.save,
        {
          id: this.contentId,
          quarter: this.model.quarter,
          year: this.model.year,
          reportInfo: string,
          type: '2',
        },
        'post'
      ).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.dataSource = []
          this.$emit('ok')
          this.Loading = false
          this.visible = false
        } else {
          console.log(res)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
// @import '../../css/checkAndEdit.less';
@import '../css/baobiaotable.less';

// /deep/ .ant-table-tbody > tr > td {
//   padding: 0 !important;
//   overflow-wrap: break-word;
// }

.table-header {
  margin-bottom: 10px;

  .table-title {
    font-weight: bold;
    margin-left: 15px;
  }
}
.edit-list {
  .header-title {
    height: 135px;
    text-align: center;
  }
}
</style>
